<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
    	<title>流程信息</title>
    	<link rel="stylesheet" type="text/css" href="/mobile/plugin/westvalley/common/plugin/iview/iview.css">
	    <script type="text/javascript" src="/mobile/plugin/westvalley/common/plugin/vue/vue.js"></script>
	    <script type="text/javascript" src="/mobile/plugin/westvalley/common/plugin/iview/iview.min.js"></script>
	    <script type="text/javascript" src="/mobile/plugin/westvalley/common/plugin/jQuery/jquery.min.js"></script>
	    <script type="text/javascript" src="/mobile/plugin/westvalley/tools/workflow/js/init.js"></script>
	    <style type="text/css">
	    	.demo-auto-complete-item{
		        padding: 4px 0;
		        border-bottom: 1px solid #F6F6F6;
		    }
		    .demo-auto-complete-group{
		        font-size: 12px;
		        padding: 4px 6px;
		    }
		    .demo-auto-complete-group span{
		        color: #666;
		        font-weight: bold;
		    }
		    .demo-auto-complete-group a{
		        float: right;
		    }
		    .demo-auto-complete-count{
		        float: right;
		        color: #999;
		    }
		    .demo-auto-complete-more{
		        display: block;
		        margin: 0 auto;
		        padding: 4px;
		        text-align: center;
		        font-size: 12px;
		    }
		    .ivu-auto-complete.ivu-select-dropdown{
		    	max-height: 300px !important;
		    }
		    .ivu-modal-body{
		    	max-height:450px;
		    	overflow:auto;
		    }
		    .col-text{
    			text-align:center;
    		}
	    </style>
	</head>
	<body>
		<div id="app" >
			<Row>
				<i-col span="24">
					<i-form :label-width="60">
						<Form-Item label="流程">
							<Auto-Complete v-model="workflowName" :data="workflowDataTemp" icon="ios-search" placeholder="请选择流程..." :filter-method="filterMethod" @on-select="selectOption" style="width:100%" clearable>
								<div class="demo-auto-complete-item" v-for="item in workflowData">
						            <div class="demo-auto-complete-group">
						                <span>{{ item.title }}</span>
						            </div>
						            <i-option v-for="option in item.children" :ref="option.ref" :value="option.id" :key="option.id">
						            	<span>{{ option.id }}</span>
						                <span class="demo-auto-complete-title">{{ option.title }}</span>
						                <span class="demo-auto-complete-count">V{{ option.version }}</span>
						            </i-option>
						        </div>
							</Auto-Complete>
						</Form-Item>
						<Form-Item label="节点">
							<i-select v-model="workflowNodeId" label-in-value>
		        				<i-option v-for="item in workflowNodeData" :value="item.value" :key="item.value">
		        					<span>{{ item.label }}</span>
            						<span style="float:right;color:#ccc">{{ item.value }}</span>
		        				</i-option>
		    				</i-select>
						</Form-Item>
					</i-form>
				</i-col>
			</Row>
			<Row>
				<i-col span="24">
					<div style="margin: 10px">
						表格高度:
						<i-input v-model="fixedHeader" placeholder="填写高度..." style="width: 150px"></i-input>
						表格尺寸:
						<Radio-group v-model="tableSize" type="button">
			            	<Radio label="large">大</Radio>
			            	<Radio label="default">中</Radio>
			            	<Radio label="small">小</Radio>
			        	</Radio-group>
			        	字段JSON:
			        	<i-button type="info" shape="circle" icon="ios-search" @click="showFieldSwitch"></i-button>
			        	节点附加脚本
			        	<i-button type="success" @click="showScriptSwitch">节点脚本</i-button>
		        	</div>
				</i-col>
			</Row>
			<Row>
				<i-col span="24">
					<Tabs v-show="showTabs" :size="tableSize">
						<Tab-Pane v-for="(item,index) in workflowFieldData" :label="index" :name="index" >
							<Row>
				        		<i-col span="24" >
				        			<i-table :size="tableSize" border highlight-row :columns="workflowFieldColums" :data="item" :height="fixedHeader" ></i-table>
				        		</i-col>
				        	</Row>
						</Tab-Pane>
					</Tabs>
				</i-col>
			</Row>
			
			
			<Modal v-model="showFieldJSON">
				<p slot="header" style="color:#2d8cf0;text-align:center">
		            <Icon type="information-circled"></Icon>
		            <span>JSON</span>
		        </p>
		        <i-input v-model="fieldJSONText" type="textarea" :rows="10" readonly></i-input>
		        <div slot="footer"></div>
			</Modal>
			
			<Modal v-model="showScript" width="800">
				<p slot="header" style="color:#2d8cf0;text-align:center">
		            <Icon type="information-circled"></Icon>
		            <span>script</span>
		        </p>
		        <Tabs v-model="scriptTabName" @on-click="selectScriptTabName">
		        	<Tab-Pane label="脚本" name="1">
		        		<i-input v-model="scriptText" type="textarea" :rows="15" readonly></i-input>
		        	</Tab-Pane>
		        	<Tab-Pane label="添加脚本" name="2">
		        		<i-form :label-width="50">
				        	<Form-Item v-for="(item, index) in scriptList" :label="'脚本' + (index + 1)" >
				        		<Row>
				        			<i-col span="18">
				        				<i-input type="text" v-model="item.src" placeholder="src"></i-input>
				        			</i-col> 
				        			<i-col span="4" offset="1">
						                <i-button type="ghost" @click="removeItem(index)" long>删除</i-button>
						            </i-col>
				        		</Row>
				        	</Form-Item>
				        </i-form>
				        <Row>
							<i-col span="24">
								<i-button type="dashed" icon="plus-round" @click="addItem" long>新增</i-button>
							</i-col>
						</Row>
		        	</Tab-Pane>
		        	<Tab-Pane label="action" name="3">
		        		<i-form :label-width="50">
		        			<Form-Item label="序号" >
		        				<Row>
				        			<i-col span="20">
				        				<Row>
				        					<i-col span="4" offset="1" class="col-text">动作名称</i-col>
				        					<i-col span="4" offset="1" class="col-text">节点前后</i-col>
				        					<i-col span="6" offset="1" class="col-text">action</i-col>
				        					<i-col span="2" offset="1" class="col-text">顺序</i-col>
				        					<i-col span="2" offset="1" class="col-text">启用状态</i-col>
				        				</Row>
				        			</i-col> 
				        			<i-col span="2" offset="1" class="col-text">操作</i-col>
				        		</Row>
		        			</Form-Item>
		        			<Form-Item v-for="(item, index) in actionList" :label="'' + (index + 1)" >
		        				<Row>
				        			<i-col span="20">
				        				<Row>
				        					<i-col span="4" offset="1">
				        						<i-input type="text" v-model="item.actionname" placeholder="动作名称"></i-input>
				        					</i-col>
				        					<i-col span="4" offset="1">
				        						<i-select v-model="item.ispreoperator" >
				        							<i-option value="0">节点前</i-option>
				        							<i-option value="1">节点后</i-option>
				        						</i-select>
				        					</i-col>
				        					<i-col span="6" offset="1">
				        						<i-select v-model="item.interfaceid" filterable>
				        							<i-option v-for="item in actionAllList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
				        						</i-select>
				        					</i-col>
				        					<i-col span="2" offset="1">
				        						<i-input type="text" v-model="item.actionorder" placeholder="order"></i-input>
				        					</i-col>
				        					<i-col span="2" offset="1">
				        						<i-switch v-model="item.isused">
				        							<span slot="open">ON</span>
        											<span slot="close">OFF</span>
				        						</i-switch>
				        					</i-col>
				        				</Row>
				        			</i-col> 
				        			<i-col span="2" offset="1">
						                <i-button type="ghost" @click="removeAction(index)" long>删除</i-button>
						            </i-col>
				        		</Row>
		        			</Form-Item>
		        		</i-form>
		        		<Row>
							<i-col span="24">
								<i-button type="dashed" icon="plus-round" @click="addAction" long>新增</i-button>
							</i-col>
						</Row>
		        	</Tab-Pane>
		        	<Tab-Pane label="常用脚本" name="4">
		        		<i-form :label-width="50">
		        			<Form-Item v-for="(item, index) in scriptUse" :label="'' + (index + 1)" >
		        				<i-input type="text" v-model="item.src"  placeholder="src" readonly></i-input>
				        	</Form-Item>
		        		</i-form>
		        	</Tab-Pane>
		        </Tabs>
		        <div slot="footer">
		        	<i-button @click="saveScript">保存</i-button>
		        </div>
			</Modal>
			
		</div>
	</body>
</html>
